<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>客户列表</title>
    <script type="text/javascript" src="js/flexible2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="coms-container" id="app">
        <div class="khlb-nav-seat"></div>
        <div class="khlb-nav-fixed-t">
            <ul class="khlb-nav">
                <li class="active"><a href="#">全部</a></li>
                <li><a href="#">待放款</a></li>
                <li><a href="#">已放款</a></li>
                <li><a href="#">已完成</a></li>
            </ul>
           <!--  <ul class="khlb-subnav">
                <li class="active"><a href="#">资料待提交</a></li>
                <li><a href="#">资料审核中</a></li>
                <li><a href="#">资料未通过</a></li>
            </ul> -->
        </div>
        <div class="khlb-search">
            <div class="search-box">
                <i class="iconfont icon-sousuo cicon-1"></i>
                <input type="text" class="ipt-search" placeholder="选择二手车商" />
                <a href="CheShang-search.html" class="cheshang-entry"></a>
                <i class="iconfont icon-guanbi_ cicon-2"></i>
            </div>
        </div>
        <div class="khlb-sxze">授信总金额：¥4,424,213.00</div>
        <div id="J_scrollableContainer" class="khlb_scrollableContainer">
            <ul class="khlb-list" ref="scrollableContainer">
                <li v-for="item in dataList">
                    <a href="KuHuDetail-ZiLiaoDaiTiJiao.html" class="detail">
                        <p class="tit">{{item.uname}}</p>
                        <p class="phone">13056242453</p>
                        <div class="total">实际贷款：¥180000.00</div>
                        <div class="freeze">冻结金额：¥10000.00</div>
                        <span class="status">已放款</span>
                    </a>
                    <div class="handle clearfix">
                        <p class="status">上传购车资料即可解除冻结</p>
                        <a href="KuHuDetail-ZiLiaoDaiTiJiao.html" class="">上传购车资料</a>
                    </div>
                </li>
            </ul>
            <mugen-scroll :handler="fetchData" :should-handle="!loading">
                <div class="coms-nodata" v-if="isNoData">
                    <p class="cpic-icon"><i class="iconfont icon-none"></i></p>
                    <p class="txt">暂无数据</p>
                </div>
                <div class="coms-dropload-load" v-if="!isDataEnd"><span class="loading"></span>玩命加载中...</div>
            </mugen-scroll>
        </div>
    </div>
    <ul class="coms-footer-1">
    <li class="active"><a href="index.html">
      <p class="cicon"><i class="iconfont icon-home"></i></p>
      <p class="txt">首页</p>
    </a></li>
    <li><a href="KeHu-list.html">
      <p class="cicon"><i class="iconfont icon-kehu1"></i></p>
      <p class="txt">客户</p>
    </a></li>
  </ul>
    <link rel="stylesheet" type="text/css" href="js/vue/mescroll/mescroll.css">
    <script type="text/javascript" src="js/vue/vue-2.5.17.js"></script>
    <script type="text/javascript" src="js/vue/axios.min.js"></script>
    <script type="text/javascript" src="js/vue/qs.js"></script>
    <script type="text/javascript" src="js/vue/vue-mugen-scroll.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#J_scrollableContainer',
        data: {
            loading: false,
            isDataEnd: false,
            isNoData: false,
            size: 10, //每页取多少个数据
            page: 1, //页数
            mescroll: null, //mescroll实例对象
            dataList: [] //列表数据
        },
        methods: {
            fetchData: function() {
                var that = this;
                this.loading = true
                axios({
                    method: 'post',
                    url: 'https://wnworld.com/chechedai/api/kehulist.php',
                    transformRequest: [function(data) {
                        // 对 data 进行任意转换处理
                        return Qs.stringify(data)
                    }],
                    responseType: 'json', // 默认的
                    data: {
                        size: that.size,
                        page: that.page
                    }
                }).then(function(response) {
                    that.loading = false;
                    if (response.data.ok) {
                        that.page = that.page + 1;
                        that.dataList = that.dataList.concat(response.data.lists);
                        console.dir(that.dataList)
                        if (response.data.lists.length < that.size) {
                            that.isDataEnd = true;
                            that.loading = true;
                        }
                        if (response.data.lists.length == 0) {
                            that.isNoData = true;
                            that.isDataEnd = true;
                            that.loading = true;
                        }
                    } else {

                    }
                });
            }
        },
        components: { MugenScroll }

    })
    </script>
</body>

</html>